<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>

  <body>
    <main id="webchat"></main>
    <script type="module">
      run(async function () {
        const {
          WebChat: { renderWebChat, testIds }
        } = window; // Imports in UMD fashion.

        const { directLine, store } = testHelpers.createDirectLineEmulator();

        renderWebChat(
          {
            directLine,
            store,
            styleOptions: { feedbackActionsPlacement: 'activity-actions' }
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();
        pageElements.byTestId(testIds.sendBoxTextBox).focus();

        // GIVEN: An activity with feedback form.
        await directLine.emulateIncomingActivity({
          type: 'message',
          id: 'a-00000',
          timestamp: 0,
          text: 'This is a test message to show feedback buttons',
          from: {
            role: 'bot'
          },
          locale: 'en-US',
          entities: [],
          channelData: {
            feedbackLoop: {
              type: 'default',
              disclaimer: 'This is a test disclaimer message'
            }
          }
        });

        await pageConditions.numActivitiesShown(1);

        // WHEN: Focus on the like button.
        await host.sendShiftTab(3);
        await host.sendKeys('ENTER', 'SPACE');

        // THEN: The feedback form should be expanded.
        await pageConditions.became(
          'feedback form is open',
          () => document.activeElement === pageElements.byTestId(testIds.feedbackSendBox),
          1000
        );

        // WHEN: An empty feedback is being submitted.
        const { activity } = await directLine.actPostActivity(async () => {
          await host.sendTab(1);
          await host.sendKeys('ENTER');
        });

        // THEN: Should post a "message/submitAction".
        expect(activity).toEqual(
          expect.objectContaining({
            type: 'invoke',
            name: 'message/submitAction',
            value: {
              actionName: 'feedback',
              actionValue: {
                reaction: 'like',
                feedback: {
                  feedbackText: ''
                }
              }
            }
          })
        );

        // THEN: Feedback form should be collapsed.
        await expect(pageElements.byTestId(testIds.feedbackSendBox)).toBeFalsy();

        // THEN: All feedback buttons should be grayed out.
        await expect(
          Array.from(pageElements.allByTestId(testIds.feedbackButton)).every(
            buttonElement => buttonElement.getAttribute('aria-disabled') === 'true'
          )
        ).toBe(true);

        // THEN: Should match snapshot.
        await host.snapshot('local');
      });
    </script>
  </body>
</html>
